<template>
  <div class="tem-container">
    <div>
      <el-button class="tem-back" type="primary" size="mini" @click="goBack">返回</el-button>
    </div>
    <div class="tem-testarea">
      <el-scrollbar class="page-scroll">
        <div v-for="(fonts, index) in fontStyles" :key="index" class="tem-font-box">
            <div class="tem-font-row">
                {{fonts.label}}
            </div>
            <div class="tem-font-row">
                {{fonts.value}}
            </div>
            <div class="tem-font-row" :style="{'font-family': fonts.value}">
                {{fonts.modelStyle}}
            </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fontStyles: [
        {
          label: "宋体",
          value: "SimSun",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "黑体",
          value: "SimHei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "微软雅黑",
          value: "MicrosoftYahei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "微软正黑体",
          value: "MicrosoftJhengHei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "楷体",
          value: "KaiTi",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "新宋体",
          value: "NSimSun",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "仿宋",
          value: "FangSong",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "苹方",
          value: "PingFangSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文黑体",
          value: "STHeiti",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文楷体",
          value: "STKaiti",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文宋体",
          value: "STSong",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文仿宋",
          value: "STFangsong",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文中宋",
          value: "STZhongsong",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文琥珀",
          value: "STHupo",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文新魏",
          value: "STXinwei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文隶书",
          value: "STLiti",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文行楷",
          value: "STXingkai",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "冬青黑体简",
          value: "HiraginoSansGB",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "兰亭黑-简",
          value: "LantingheiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "翩翩体-简",
          value: "HanzipenSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "手札体-简",
          value: "HannotateSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "宋体-简",
          value: "SongtiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "娃娃体-简",
          value: "WawatiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "魏碑-简",
          value: "WeibeiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "行楷-简",
          value: "XingkaiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "雅痞-简",
          value: "YapiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "圆体-简",
          value: "YuantiSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "幼圆",
          value: "YouYuan",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "隶书",
          value: "LiSu",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文细黑",
          value: "STXihei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "华文彩云",
          value: "STCaiyun",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正舒体",
          value: "FZShuTi",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正姚体",
          value: "FZYaoti",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "思源黑体",
          value: "SourceHanSansCN",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "思源宋体",
          value: "SourceHanSerifSC",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "文泉驿微米黑",
          value: "WenQuanYiMicroHei",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪旗黑",
          value: "HYQihei40S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪旗黑",
          value: "HYQihei50S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪旗黑",
          value: "HYQihei60S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪大宋简",
          value: "HYDaSongJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪楷体",
          value: "HYKaiti",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪家书简",
          value: "HYJiaShuJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪PP体简",
          value: "HYPPTiJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪乐喵体简",
          value: "HYLeMiaoTi",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪小麦体",
          value: "HYXiaoMaiTiJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪程行体",
          value: "HYChengXingJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪黑荔枝",
          value: "HYHeiLiZhiTiJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪雅酷黑W",
          value: "HYYaKuHeiW",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪大黑简",
          value: "HYDaHeiJ",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "汉仪尚魏手书W",
          value: "HYShangWeiShouShuW",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正粗雅宋简体",
          value: "FZYaSongS-B-GB",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正报宋简体",
          value: "FZBaoSong-Z04S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正粗圆简体",
          value: "FZCuYuan-M03S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正大标宋简体",
          value: "FZDaBiaoSong-B06S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正大黑简体",
          value: "FZDaHei-B02S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正仿宋简体",
          value: "FZFangSong-Z02S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正黑体简体",
          value: "FZHei-B01S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正琥珀简体",
          value: "FZHuPo-M04S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正楷体简体",
          value: "FZKai-Z03S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正隶变简体",
          value: "FZLiBian-S02S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正隶书简体",
          value: "FZLiShu-S01S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正美黑简体",
          value: "FZMeiHei-M07S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正书宋简体",
          value: "FZShuSong-Z01S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正舒体简体",
          value: "FZShuTi-S05S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正水柱简体",
          value: "FZShuiZhu-M08S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正宋黑简体",
          value: "FZSongHei-B07S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正宋三简体",
          value: "FZSong",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正魏碑简体",
          value: "FZWeiBei-S03S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正细等线简体",
          value: "FZXiDengXian-Z06S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正细黑一简体",
          value: "FZXiHeiI-Z08S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正细圆简体",
          value: "FZXiYuan-M01S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正小标宋简体",
          value: "FZXiaoBiaoSong-B05S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正行楷简体",
          value: "FZXingKai-S04S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正姚体简体",
          value: "FZYaoTi-M06S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正中等线简体",
          value: "FZZhongDengXian-Z07S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正准圆简体",
          value: "FZZhunYuan-M02S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正综艺简体",
          value: "FZZongYi-M05S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正彩云简体",
          value: "FZCaiYun-M09S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正隶二简体",
          value: "FZLiShuII-S06S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正康体简体",
          value: "FZKangTi-S07S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正超粗黑简体",
          value: "FZChaoCuHei-M10S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正新报宋简体",
          value: "FZNewBaoSong-Z12S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正新舒体简体",
          value: "FZNewShuTi-S08S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正黄草简体",
          value: "FZHuangCao-S09S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正少儿简体",
          value: "FZShaoEr-M11S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正稚艺简体",
          value: "FZZhiYi-M12S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正细珊瑚简体",
          value: "FZXiShanHu-M13S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正粗宋简体",
          value: "FZCuSong-B09S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正平和简体",
          value: "FZPingHe-S11S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正华隶简体",
          value: "FZHuaLi-M14S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正瘦金书简体",
          value: "FZShouJinShu-S10S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正细倩简体",
          value: "FZXiQian-M15S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正中倩简体",
          value: "FZZhongQian-M16S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正粗倩简体",
          value: "FZCuQian-M17S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正胖娃简体",
          value: "FZPangWa-M18S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正宋一简体",
          value: "FZSongYi-Z13S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正剪纸简体",
          value: "FZJianZhi-M23S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正流行体简体",
          value: "FZLiuXingTi-M26S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正祥隶简体",
          value: "FZXiangLi-S17S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正粗活意简体",
          value: "FZCuHuoYi-M25S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正胖头鱼简体",
          value: "FZPangTouYu-M24S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正卡通简体",
          value: "FZKaTong-M19S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正艺黑简体",
          value: "FZYiHei-M20S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正水黑简体",
          value: "FZShuiHei-M21S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正古隶简体",
          value: "FZGuLi-S12S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正幼线简体",
          value: "FZYouXian-Z09S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正启体简体",
          value: "FZQiTi-S14S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正小篆体",
          value: "FZXiaoZhuanTi-S13",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正硬笔楷书简体",
          value: "FZYingBiKaiShu-S15S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正毡笔黑简体",
          value: "FZZhanBiHei-M22S",
          modelStyle: "夏目友人帐/ABCDEFG"
        },
        {
          label: "方正硬笔行书简体",
          value: "FZYingBiXingShu-S16S",
          modelStyle: "夏目友人帐/ABCDEFG"
        }
      ]
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped>
.tem-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tem-back {
  float: left;
  margin: 0 0 10px 0;
}
.tem-testarea {
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}
.tem-font-box {
  display: flex;
  justify-content: flex-start;
}
.tem-font-row {
  width: 10%;
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding-left: 20px;
}
</style>